﻿<%@ Page Language="C#" MasterPageFile="~/default.master"  AutoEventWireup="true" CodeBehind="Pagenation.aspx.cs"
    Inherits="Chinook.Web.DataGrid.Pagenation" %>
<asp:Content ID="Content1" ContentPlaceHolderID="BodyContentPlaceholder" runat="Server">
    <%//In-page search form %>
    <div id="wosSearchBox" class="searchBox vm-frm-reg">
        <div class="div-header">
            <span>Search Employee</span>
        </div>
        <div class="searchForm" id="searchForm">
            <table>
                <tr>
                    <td class="vm-right-align">
                        <label for="">
                            Album</label>
                    </td>
                    <td>
                        <input type="text" class="text txtName req required" title="First name" id="txtName"
                            name="txtName" value="" tabindex="2" />
                            &nbsp;
                        <input type="submit" class="button small red" value="Find" id="btnFind">
                    </td>
                </tr>             
                <tr>
                    <td colspan="2">
                        &nbsp;
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <p>
        &nbsp;</p>
    <%//Flexigrid placeholder %>
    <table class="flexiGrid" style="display: none">
    </table>

    <script type="text/javascript" language="javascript">
        //-------------------------------------------------------------------------------------------------
        //Page Load Complete (After Dom Ready)
        //-------------------------------------------------------------------------------------------------
        $(function() {
            $("#wosSearchBox").attachSliderButton();
            setTimeout("InitAlbumGrid()", 0);
            $("#btnFind").click(SearchAlbum);
        });
        //-------------------------------------------------------------------------------------------------
        // Initialize FlexiGrid for "Album Search"
        //-------------------------------------------------------------------------------------------------
        function InitAlbumGrid() {
            $(".flexiGrid").flexigrid({
                dataType: 'json',
                colModel: [
                    { display: '', name: '', width: 15, align: 'center', process: FormatSelect },     
		            { display: 'Title', name: 'Title', width: 250, sortable: true, align: 'left', process: function(celDiv, id) {$(celDiv).css("text-align","left");} }
		            ],
		        sortname: "Title",
                sortorder: "asc",
                usepager: true,
                title: false, //'Album'
                useRp: true,
                rp: 10,
                showTableToggleBtn: false,
                width: 'auto', //'auto'
                height: 'auto'
                , onSuccess: flexi_OnAfterRowBound //change row colours here 
                ,onSubmit: addFormData
            });
        }
        /*FlexiGrid Event Handlers(Start)*/
        //-------------------------------------------------------------------------------------------------
        //
        //-------------------------------------------------------------------------------------------------
        function addFormData() { SearchAlbum(this); }
        //-------------------------------------------------------------------------------------------------
        //
        //-------------------------------------------------------------------------------------------------
        function flexi_OnAfterRowBound() {
                    //            $(".flexiGrid tr").each(function() {
                    //                var email = $(this).find("td:nth(4)").text()
                    //                if (email == 'steve@chinookcorp.com') { $(this).addClass("lightgreen") }
                    //            });
        }
        function FormatSelect(celDiv, id) { $(celDiv).addClass("icoBul-green"); }
        function AttachTipsy(celDiv, id) { $(celDiv).addClass("vm-beh-pointer").css("text-align", "left").tipsy({ gravity: 'nw', title: function() { return $(celDiv).html() }, html: true }); }
        function AttachEdit(celDiv, id) { $(celDiv).addClass("icoEd"); }
        function AttachDelete(celDiv, id) { $(celDiv).addClass("icoDelete"); }
        function procMe(celDiv, id) {
            var date = new Date(parseInt($(celDiv).html().substr(6)));
            $(celDiv).html($.datepicker.formatDate('dd-M-yy', date));
        }
        /*FlexiGrid Event Handlers(End)*/
       
        //-------------------------------------------------------------------------------------------------
        // SearchAlbum AJAX Web Service Call
        //-------------------------------------------------------------------------------------------------
        function SearchAlbum(cfg) {
            var request = {};
            request.PageIndex = $(".flexiGrid").getConfig('page');//default
            request.PageSize = $(".flexiGrid").getConfig('rp');//record per page
            request.Title = ""; 
            if (cfg.page != undefined) { request.PageIndex = cfg.newp;request.PageSize = cfg.rp;}          
            //,AlbumSearchRequest.PageSize
            var params = JSON.stringify({ 'albumSearchRequest': request });
            $.ajax({
                type: "POST",
                url: _absWebRoot + "AlbumWebService.asmx/SearchAlbum",
                data: params,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnAlbumSearchSuccess,
                error: OnAlbumSearchError
            });
            return false;
        }
        //-------------------------------------------------------------------------------------------------
        // SearchAlbum Success Handler
        //-------------------------------------------------------------------------------------------------
        function OnAlbumSearchSuccess(res) {             
            $(".flexiGrid").flexigrid().flexAddData(formatAlbumResults(res))
            $(".flexiGrid").flexigrid().flexReload();
            return false;
        }
        //-------------------------------------------------------------------------------------------------
        // SearchAlbum Failure Handler
        //-------------------------------------------------------------------------------------------------
        function OnAlbumSearchError(res) {
        }
        //-------------------------------------------------------------------------------------------------
        // SearchAlbum Result Formatter to match FlexiGrid's expected format
        //-------------------------------------------------------------------------------------------------
        function formatAlbumResults(res) {
            var rows = Array();
            jQuery.each(res.d.AlbumViewModel, function(i, v) {
                rows.push({ id: v.Id, cell: ['', v.Title] });
            });
            return { total: res.d.TotalCount, page: res.d.PageIndex, rows: rows };
        }
        //-------------------------------------------------------------------------------------------------
        //
        //-------------------------------------------------------------------------------------------------
        exists = function(x) {
            return (x === undefined || x === null) ? false : true;
        }
        //-------------------------------------------------------------------------------------------------
        //http://groups.google.com/group/flexigrid/browse_thread/thread/4e673e6195c6121a
        //-------------------------------------------------------------------------------------------------       
        $.fn.extend({
            getConfig: function(key) {
                var ret;
                this.each(function() {if (exists(this.p) && exists(this.p[key])) { ret = this.p[key]; return; }});
                return ret;
            }
        }); 
    </script>
</asp:Content>
